<template>
	<a-modal :visible="visible" width="550px" title="拒绝预定" centered destroyOnClose @cancel="cancel" :footer="null" :maskClosable="false" :bodyStyle="{padding: 0}">
		<a-form ref="formRef" :model="modelRef" class="flex-container-nomal" style="max-height: 70vh" @finish="run">
			<div class="flex1 auto-y">
				<a-descriptions size="small" :contentStyle="{justifyContent: 'flex-end'}">
					<!-- /{{ sexList[detailInfo.gender] }} -->
					<a-descriptions-item label="预定人信息" :span="3">{{ detailInfo.name }}/{{ detailInfo.phone }}</a-descriptions-item>
					<a-descriptions-item label="预定房源" :span="3">{{ detailInfo.houseAddress }}</a-descriptions-item>
					<a-descriptions-item label="最晚签约日期" :span="3">{{ formatDate(detailInfo.signDate) }}</a-descriptions-item>
					<a-descriptions-item label="定金" :span="3">{{ detailInfo.money }}元</a-descriptions-item>
					<a-descriptions-item label="备注" :span="3">{{ detailInfo.comment }}</a-descriptions-item>
				</a-descriptions>
				<a-divider type="horizontal" style="background-color: #f5f5f5" />
				<a-form-item label="拒绝原因" name="rejectReason" :rules="[{required: true, message: '请输入拒绝原因'}]">
					<a-textarea v-model:value="modelRef.rejectReason" placeholder="请输入拒绝原因" :rows="4" show-count :maxlength="500" />
				</a-form-item>
			</div>
			<div class="a-modal-dialog-footer">
				<a-space :size="12">
					<a-space :size="12">
						<a-button @click="cancel">取消</a-button>
						<a-button type="primary" html-type="submit" :loading="loading" :disabled="loading">确定</a-button>
					</a-space>
				</a-space>
			</div>
		</a-form>
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {useRequest} from 'vue-request'
	import {getBookDetail, bookReject} from '@/api/contract'
	import {message} from 'ant-design-vue'
	import {sexList} from '@/utils'
	import {formatDate} from 'yuxin-base/src/utils/date'

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		id: {
			type: [String, Number],
			default: ''
		}
	})
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
		resetForm()
	}
	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDetail()
			}
		}
	)

	const modelRef = reactive({
		rejectReason: ''
	})

	const detailInfo = ref<any>({})
	const getDetail = () => {
		getBookDetail(props.id).then((res: any) => {
			detailInfo.value = res.data
		})
	}

	const sendRequest = () => {
		const params = {
			id: props.id,
			rejectReason: modelRef.rejectReason
		}
		return bookReject(params)
	}

	const {run, loading} = useRequest(sendRequest, {
		manual: true,
		formatResult: (res: any) => {
			if (res.code == 200) {
				message.success('操作成功')
				setTimeout(() => {
					emit('success')
					cancel()
				}, 300)
			}
		}
	})

	// 重置表单
	const formRef = ref<any>()
	const resetForm = () => {
		detailInfo.value = {}
		formRef.value.resetFields()
	}
</script>
